<template>
  <div :class="`flex flex-col  custom-cell-container  pt-4  bg-white`">
    <div class="flex flex-row text-nowrap items-center pl-4 text-[#262626] text-[14px]">
      <p>{{ title }}</p>
      <div v-if="required" class="bg-red-500 rounded-full w-[4px] h-[4px] ml-2"></div>
    </div>
    <div class="max-w-50 pr-4">
      <van-field
        clearable
        clickable
        v-model="cp_value"
        @focus="emits('focus')"
        @blur="emits('blur')"
        :placeholder="placeholder"
        :required="required"
        :type="type"
        :isLink="isLink"
        :readonly="readOnly"
        :maxlength="maxlength"
        autosize
        :border="false"
        :show-word-limit="cp_value.length > 0"
      >
        <template #input v-if="autocomplete">
          <el-autocomplete
            ref="autocompleteRef"
            class="form-autocomplete"
            popper-class="form-autocomplete-popper"
            v-model="cp_value"
            clearable
            :debounce="300"
            :trigger-on-focus="false"
            @focus="emits('focus')"
            :fetch-suggestions="querySearchName"
            :placeholder="placeholder"
            @blur="
              () => {
                emits('blur');
                autocompleteRef.close();
              }
            "
            @select="handleSelectSuggestions"
          />
        </template>
      </van-field>
    </div>

    <div class="px-4">
      <div class="w-full h-[0.5px] bg-[#ebedf0]"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, defineEmits, ref } from "vue";

const props = defineProps({
  iconsUrl: {
    typeof: String,
    defaultValue: "",
  },
  title: {
    typeof: String,
    defaultValue: "",
  },
  placeholder: {
    typeof: String,
    defaultValue: "请输入内容",
  },
  value: {
    typeof: String,
    defaultValue: "",
  },
  type: {
    typeof: String,
    defaultValue: "text",
  },
  maxlength: {
    typeof: Number,
    defaultValue: 50,
  },
  isLink: {
    typeof: Boolean,
    defaultValue: false,
  },
  required: {
    typeof: Boolean,
    defaultValue: false,
  },
  autocomplete: {
    typeof: Boolean,
    defaultValue: false,
  },

  readOnly: {
    typeof: Boolean,
    defaultValue: false,
  },

  querySearchName: {
    typeof: Function,
  },
});

const autocompleteRef = ref();

function handleSelectSuggestions(v) {
  emits("onSelectSuggestions", v);
}

const emits = defineEmits(["update:value", "onSelectSuggestions", "focus", "blur"]);

const cp_value = computed({
  get() {
    return props.value || "";
  },
  set(val) {
    emits("update:value", val.trim());
  },
});
</script>

<style lang="less" scoped>
:deep .van-badge--dot {
  width: 4px;
  height: 4px;
}

:deep .van-field__clear {
  padding: 12px;
}

:deep .el-input__wrapper {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  padding: 0;
}

:deep .form-autocomplete-popper .el-autocomplete-suggestion {
  max-width: 150px;
  white-space: normal;
  word-wrap: break-word;
  background-color: red;
}

.custom-cell-container {
  // type 类型为text-area时，设置最小高度
  --van-field-text-area-min-height: 100px;
  --van-field-input-text-color: #757575;
  // background-color: #f5f5f5;
}
</style>
